<template>
  <div>
    <div class="config-title">
      <div class="field" :class="isActive === 'field' ? 'is-tab-active' : ''" @click.stop="isActive = 'field'">字段设置</div>
      <div :class="isActive === 'form' ? 'is-tab-active' : ''" @click.stop="isActive = 'form'">表单设置</div>
    </div>
    <div class="content">
      <slot v-if="isActive === 'field'"></slot>
      <div v-if="isActive === 'form'">
        <div class="dynamic-title">动态表单设置</div>
        <draggable :list="dynamicFormList" group="colors" handle=".move" @drop.native.stop.prevent="">
          <div v-for="(item, index) in dynamicFormList" :key="index" class="list-item">
              <div style="display: flex;">
                <!-- <i class="V7_iconfont V7_iconV7tubiao_yidong move pointer"></i> -->
                <div class="dynamic-name">{{item.name}}</div>
              </div>
              <div>
                <span @click="editItem(item, index)" class="opera-span">编辑</span>
                <span @click="deleteItem(index)" class="opera-span danger">删除</span>
              </div>
          </div>
        </draggable>
        <el-button icon="el-icon-plus" size="small" type="text" @click.stop="addDynamic">添加动态表单</el-button>
      </div>
    </div>
    <drawer
        class="import-drawer"
        direction="rtl"
        size="520px"
        title="设置动态表单"
        :drawer="dialogVisible"
        @save="saveFormConfig"
        @cancelFun="dialogVisible = false"
        @closeDraw="dialogVisible = false">
        <template slot="column">
          <el-form
          ref="dynamicForm"
          class="form"
          :rules="rules"
          label-position="top"
          :model="dynamic"
          size="small"
          @submit.native.prevent>
				<el-form-item label="动态表单名称" prop="name">
					<el-input placeholder="请输入动态表单名称" v-model="dynamic.name" :maxlength="50"></el-input>
				</el-form-item>
        <el-form-item label="" prop="type">
          <el-radio-group v-model="dynamic.type" @change="changeType">
            <el-radio-button :label="1">显隐规则</el-radio-button>
            <el-radio-button :label="2">字段更改</el-radio-button>
          </el-radio-group>
          <el-select v-if="dynamic.type === 2" v-model="dynamic.updateField" value-key="businessId" class="field-list width-full" placeholder="请选择" size="small">
            <el-option
              v-for="item in listOptions"
              :key="item.businessId"
              :label="listMap[item.businessId].name"
              :value="item">
            </el-option>
          </el-select>
				</el-form-item>
        <div class="line"></div>
        <el-form-item label="设置条件" prop="filters">
          <conditionForm
            :fieldsList="filterFieldList"
            :conditonList="dynamic.filters"
            class="condition"
            type="filter">
          </conditionForm>
        </el-form-item>
        <el-form-item label="满足条件后" prop="formActionList">
          <updateConditionForm ref="updateConditionForm" :type="dynamic.type" :listMap="listMap" :fieldsList="list" :conditonList="dynamic.formActionList"></updateConditionForm>
        </el-form-item>
			</el-form>
        </template>
      </drawer>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref, Emit, Watch } from 'vue-property-decorator';
import draggable from 'vuedraggable';
import drawer from '@/common/views/drawer/index.vue'
import conditionForm from '@/afterSales/components/conditionFilter/conditionForm.vue';
import updateConditionForm from '../components/updateConditionForm.vue'
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash'
@Component({
  name: 'commonPanel',
  components: {
    updateConditionForm,
    draggable,
    drawer,
    conditionForm
  }
})
export default class extends Vue {
  @Prop({ default: () => [] }) public dynamicFormList!: any[];
  @Prop({ default: () => [] }) public list!: any[];
  [x: string]: any;
  private dialogVisible = false
  private isActive = 'field'
  private currIndex = -1
  private dynamic: any = {
    name: '',
    type: 1,
    formActionList: [],
    filters: [],
    updateField: null
  }

  private saveFormConfig () {
    if (this.dynamic.type === 2 && !this.dynamic.updateField) {
      this.$message.error('请选择更新字段')
      return false
    }
    (this.$refs.dynamicForm as any).validate(async (valid) => {
      if (valid) {
        const { id, modelId, name, filters, type, updateField = null } = this.dynamic
        const data = {
          type,
          modelId,
          name,
          filters,
          updateField,
          formActionList: (this.$refs as any).updateConditionForm.conditonList
        }
        console.log(data)
        if (this.currIndex !== -1) {
          this.$set(this.dynamicFormList, this.currIndex, Object.assign({}, this.dynamicFormList[this.currIndex], data));
        } else {
          this.dynamicFormList.push(data)
        }
        this.dialogVisible = false
        this.currIndex = -1
      }
    })
  }

  private get filterFieldList () {
    return this.list.filter(item => {
      return ['group'].indexOf(item.fieldType) === -1
    })
  }

  private listMap = {}

  private addDynamic () {
    this.dialogVisible = true
    this.currIndex = -1
    this.dynamic = {
      name: '',
      updateField: null,
      fieldList: [],
      type: 1,
      formActionList: [],
      filters: []
    }
  }

  private get listOptions () {
    return this.list.map(item => {
      this.listMap[item.businessId] = item
      return {
        businessId: item.businessId,
        fieldType: item.fieldType
      }
    }).filter(item => {
      return item.fieldType !== 'group'
    })
  }

  public rules = {
    name: [{ required: true, trigger: 'blur', message: '请输入动态表单名称' }]
  };

  private changeType (val: number) {
    this.dynamic.type = val
    this.dynamic.formActionList = []
  }

  private editItem (data: any, index: number) {
    const item = cloneDeep(data)
    this.dialogVisible = true
    this.currIndex = index
    item.formActionList.forEach(con => {
      if (con.actionStatus === 3 && Array.isArray(con.fieldList)) {
        con.fieldList = con.fieldList[0]
      }
    })
    this.dynamic = item
  }

  private deleteItem (index: number) {
    console.log(index)
    this.dynamicFormList.splice(index, 1);
  }
}
</script>
<style scoped lang="stylus">
.field-list {
  margin-top: 8px
}
.el-drawer__footer {
  text-align: right
}
.V7_iconV7tubiao_yidong {
  font-size: 12px;
  color: #B3B9C7;
  margin-right: 12px;
}
.list-item {
  display: flex;
  align-items: center;
  font-weight: 400;
  color: #000;
  padding: 8px 14px;
  border: 1px solid #E7E9ED;
  border-radius: 4px;
  justify-content: space-between;
  margin-bottom: 12px
  .dynamic-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 166px;
    margin-right: 8px;
  }
}
.dynamic-title {
  font-weight: 400;
  font-size: 12px;
  color: #303753;
  margin-bottom: 8px
}
.content {
  padding: 16px
}
.config-title {
  display: flex;
  box-shadow: inset 0px -1px 0px #ecf0f3;
  height: 45px;
  align-items: center;
  padding: 0px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #303753;
  cursor pointer
}
.field {
  margin-right: 40px
}
.opera-span {
  color: #008cee;
  margin-right: 8px;
  cursor: pointer;
}
.danger {
  color: #fc6c5c;
  margin-right: 0px;
}
.is-tab-active {
  color: #008BEE;
  line-height: 45px;
  border-bottom: 2px solid;
}
</style>
